<template>
<div>
  <h1>学生展示</h1>
  <table border="1" cellspacing="0" align="center">
    <tr>
      <td>姓名</td>
      <td>性别</td>
      <td>年龄</td>
      <td>手机</td>
      <td>学校</td>
      <td>班级</td>
    </tr>
    <tr v-for="i in stulist">
      <td>{{i.name}}</td>
      <td>{{i.gender}}</td>
      <td>{{i.age}}</td>
      <td>{{i.tel}}</td>
      <td>{{i.school.name}}</td>
      <td>{{i.cla.name}}</td>
    </tr>
  </table>
  <h1>学生添加</h1>
  <p>姓名:<input type="text" v-model="form.name"></p>
  <p>性别:<input type="text" v-model="form.gender"></p>
  <p>年龄:<input type="text" v-model="form.age"></p>
  <p>手机:<input type="text" v-model="form.tel"></p>
  <p>
    <select name="" id=" " v-model="form.school">
    <option :value="i.id" v-for="i in schoollist">{{i.name}}</option>
    </select>
  </p>
  <p>
    <select name="" id=" " v-model="form.cla">
    <option :value="i.id" v-for="i in classlist">{{i.name}}</option>
    </select>
  </p>
  <p><select name="" id=" " v-model="form.user">
    <option :value="i.id" v-for="i in userlist">{{i.username}}</option>
  </select></p>
  <button @click="add">添加</button>
  <br>
</div>
</template>

<script>
export default {
  name: "School_student",
  data(){
    return{
      form:{},
      stulist:{},
      schoollist:{},
      classlist:{},
      userlist:{},
    }
  },
  methods:{
    add(){
      this.$axios.post('users/xstm/',this.form)
        .then(res=>{
          console.log(res.data)
        })
    },
    get_stulist(){
      this.$axios.get('users/xstm/')
        .then(res=>{
          this.stulist=res.data.list
        })
    },
    get_classlist(){
      this.$axios.get('users/xclassm/')
        .then(res=>{
          this.classlist=res.data.list
        })
    },
    get_schoollist(){
      this.$axios.get('users/schoolm/')
        .then(res=>{
          this.schoollist=res.data.list
        })
    },
    get_userlist(){
      this.$axios.get('users/regxd/')
        .then(res=>{
          this.userlist=res.data.list
        })
    },
  },
  mounted() {
    this.get_stulist()
    this.get_classlist()
    this.get_schoollist()
    this.get_userlist()
  }
}
</script>

<style scoped>

</style>
